<template>
  <div class="homeContent">
    <div class="homeLeft homeItem">
      <ul>
        <li>
          <Title title="仓库性质" />
          <bar1 style="height: 175px;" />
        </li>
        <li>
          <Title title="质量等级" />
          <bar2 style="height: 175px;" />
        </li>
        <li>
          <Title title="质量等级占比分析" />
          <bar3 style="height: 175px;" />
        </li>
        <li>
          <Title title="建筑年代" />
          <bar4 style="height: 175px;" />
        </li>
      </ul>
    </div>
    <div class="homeCenter">
      <div class="homeTop">
        <TopInfoData :datas="obj.t" />
      </div>
      <div class="homeBottom homeItem"></div>
    </div>
    <div class="homeRight homeItem">
      <ul>
        <li>
          <Title title="使用库容分析" />
          <bar5 style="height: 175px;" />
        </li>
        <li>
          <Title title="空余库容分析" />
          <bar5 style="height: 175px;" />
        </li>
        <li>
          <Title title="标准货位数使用分析" />
          <bar6 style="height: 175px;" />
        </li>
        <li>
          <Title title="空余货位数使用分析" />
          <bar6 style="height: 175px;" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Title from '@/components/Title.vue';
import TopInfoData from '@/components/TopInfoData.vue';
import bar1 from '@/components/echart/bar1.vue';
import bar2 from '@/components/echart/bar2.vue';
import bar3 from '@/components/echart/bar3.vue';
import bar4 from '@/components/echart/bar4.vue';
import bar5 from '@/components/echart/bar5.vue';
import bar6 from '@/components/echart/bar6.vue';
const obj = reactive({
  t: [],
  l1: {},
  l2: {},
  r1: {},
  r2: {},
  b1: {},
  b2: {},
  b3: {},
});

onMounted(() => {
  obj.t = [
    {
      label: '仓库',
      value: '59',
      w: '个',
      flex: '10'
    },
    {
      label: '库房',
      value: '302',
      w: '个',
      flex: '10'
    },
    {
      label: '使用面积',
      value: '56321',
      w: '万㎡',
      flex: '10'
    },
    {
      label: '占用库容',
      value: '7859',
      w: '个',
      flex: '10'
    },
    {
      label: '空余库容',
      value: '5449',
      w: '个',
      flex: '10'
    },
    {
      label: '人均面积',
      value: '359',
      w: '个',
      flex: '10'
    },
    {
      label: '标准货位数',
      value: '159',
      w: '个',
      flex: '10'
    },
    {
      label: '空余货位数',
      value: '3359',
      w: '个',
      flex: '10'
    },
    {
      label: '油罐',
      value: '8859',
      w: '个',
      flex: '10'
    },
    {
      label: '油罐利用率',
      value: '76',
      w: '%',
      flex: '10'
    },
  ]
});
</script>

<style scoped lang="scss"></style>
